<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		html, body {
		            width: 100%;
		            height: 100%;
		            margin: 0; 
		            padding: 0;
		        }
			.sea {
				position: relative;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				height: 100vh;
				min-width: 100%;
				max-width: auto;
				opacity: 0.8;
				border-radius: 5px;
				overflow: hidden;
			}
			
			.sea {
				background-color: deepskyblue;
			}
			
			.wave {
				position: absolute;
				top: -3400px;
				left: -1200px;
				right: -1200px;
				width: 4000px;
				height: 4000px;
				border-radius: 46%;
				filter: opacity(0.6);
				animation: drift linear infinite;
				transform-origin: 50% 49%;
				margin:0 auto;
			}
			
			.wave {
				background: #fcfcfc;
			}
			::-webkit-scrollbar {
				width: 8px;
				height: 6px;
				border-radius: 15px;
				-webkit-border-radius: 15px;
			}
			
			::-webkit-scrollbar-track-piece {
				border-radius: 15px;
				-webkit-border-radius: 15px;
			}
			
			::-webkit-scrollbar-thumb:vertical {
				height: 8px;
				background-color: rgba(162, 162, 162, 0.5);
				border-radius: 15px;
				-webkit-border-radius: 15px;
			}
			
			::-webkit-scrollbar-thumb:horizontal {
				width: 6px;
				background-color: rgba(160, 163, 168, 0.5);
				border-radius: 15px;
				-webkit-border-radius: 15px;
			}
			.sea .wave:nth-of-type(1) {
				animation-duration: 10s;
			}

			.sea .wave:nth-of-type(2) {
				animation-duration: 16s;
			}

			.sea .wave:nth-of-type(3) {
				animation-duration: 22s;
				filter: opacity(0.2);
			}

			@keyframes drift {
				from {
					transform: rotate(360deg)
				}

				to {
					transform: rotate(0deg)
				}
			}
		</style>
	</head>
	<body>
		<div class="sea">
			<span class="wave"></span>
			<span class="wave"></span>
			<span class="wave"></span>

		</div>
	</body>
</html>
